<template>
  <div class="app-container calendar-list-container">
    <div class="w-body">
      <!--<el-form ref="entity" label-width="80px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="当前订单" prop="orderNo">
              <el-input v-model="orderNo" :readonly="true">
                <el-button slot="append" icon="el-icon-search" @click="openOrder"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>-->
      <search :list="queryList" :queryEntity="paramsEntity" @dataChange="dataChange" :span="12"></search>
      <div class="w-table">
        <grid gridTitle="物品信息" :columns="columns" :enableEdit="false" :loading="false" ref="mainGrid" height="auto" diffHeight="225" :pagination="false" :permissions="permissions"
          @prod="doProd">
        </grid>
      </div>
    </div>
    <!-- <GridDialog ref="orderGridDialog" :multi="false" :url="orderUrl" :columns="orderColumns" @select="selectOrderData" :permissions="permissions"
      :queryEntity="{orderStaus: 'PROD'}" :queryList="orderQueryList">
    </GridDialog>-->
  </div>
</template>
<script>
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'
import url from '@/const/apiURL'
import GridDialog from '@/components/GridDialog'
import grid from '@/components/Grid'
import { mapGetters } from 'vuex'
import { queryField } from '@/const/query'
import { colunms } from '@/const/colunms'
import search from '@/components/Search'


export default {
  components: { GridDialog, grid, search },
  data () {
    return {
      queryList: [
        { name: '订单编号', type: 'query', prop: 'orderNo', rowValue: 'orderNo', rowName: 'orderNo', openChange: true, url: url.ORDER_LIST_URL, columns: colunms().orderColumns, pagination: true, queryList: queryField().order, queryEntity: { orderStaus: 'PROD' }, autoInput: true }
      ],
      orderNo: '',
      paramsEntity: { orderNo: '' },
      orderQueryList: queryField().order,
      orderUrl: url.ORDER_LIST_URL,
      entity: {
        customerCode: '',
        customerName: '',
        goods: []
      },
      orderColumns: colunms().orderColumns,
      columns: [
        {
          label: '操作', width: 110, prop: 'op', align: 'center', template: 'op', opList: [
            { name: '生产工序', clickName: 'prod', auth: 'business_step', showFomatter: function (row) { return row.price > 0 } }
          ]
        },
        { label: this.global.modelName, width: 90, prop: 'goodsName', align: 'center' },
        { label: this.global.modelProp, width: 80, prop: 'modelProp', align: 'center' },
        { label: '物料名称', width: 360, prop: 'materialName', align: 'center' },
        { label: '物料类型', width: 100, prop: 'materialTypeName', align: 'center' },
        { label: '单位', width: 80, prop: 'unit', align: 'center' },
        { label: '单价', width: 80, prop: 'price', align: 'center', },
        { label: '数量', width: 80, prop: 'quantity', align: 'center' },
        { label: '完成数量', width: 80, prop: 'finishQuantity', align: 'center' },
        { label: '完成卷数', width: 80, prop: 'total', align: 'center' }
      ]
    }
  },
  created () {
    this.orderNo = this.$route.query.orderNo
    this.init()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    init () {
      if (this.orderNo) {
        this.initData()
      }
    },
    doProd (row) {
      this.$router.push({ path: '/prod/business/step', query: { goodsCode: row.modelCode, orderNo: this.orderNo } })
    },
    openOrder () {
      this.$refs['orderGridDialog'].show()
    },
    dataChange (row) {
      this.$refs['mainGrid'].deleteAll()
      this.orderNo = row.orderNo
      this.initData()
    },
    selectOrderData (row) {
      this.$refs['mainGrid'].deleteAll()
      this.orderNo = row.orderNo
      this.initData()
    },
    initData () {
      this.viewUrl(this.orderNo).then(data => {
        if (data) {
          data.goods.forEach(row => {
            this.$refs['mainGrid'].addRow(row)
          })
        }
      })
    },
    viewUrl (orderNo) {
      return request({
        url: url.ORDER_VIEW_URL,
        method: 'post',
        data: { key: 'key' },
        params: { orderNo: orderNo, showTotal: true }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.w-body {
  padding-top: 8px;
}
.w-table {
  border: 1px solid #ebeef5;
}
.w-table-title {
  border: 1px solid #ebeef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  width: 100%;
  font-size: 14px;
  color: gray;
}
</style>
